<template>
    <div class="body">
        <van-sticky>
            <div class="search">
                <div class="logo">
                    <img src="../assets/images/2logo.png" style="height: 56px;" alt="">
                </div>
                <van-search shape="round" @focus="$router.push('/home/search')" placeholder="搜索就买亿点点  " />
            </div>
        </van-sticky>
        <div>
            <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
                <van-swipe-item v-for="item in lunbo" :key="item.img">
                    <img v-lazy="item.img">
                </van-swipe-item>
            </van-swipe>
        </div>
        <div>
            <!-- 9宫格 -->
            <van-grid square clickable border>
                <van-grid-item v-for="item in grid" :key="item.img" :to="item.to">
                    <div class="item">
                        <img :src="item.img">
                        <div class="text">{{ item.text }}</div>
                    </div>
                </van-grid-item>
            </van-grid>
        </div>
        <div>
            <img src="../assets/weiduoliya.png" style=" margin-top: 10px;" alt="">
        </div>
        <div>
            <!-- <van-divider>推荐商品</van-divider> -->
            <img src="../assets/images2/推荐2022.png" alt="">
        </div>
        <div class="goodslist">
            <Goods v-for="item in goods" :key="item.id" :data="item" @click="handleGoods"></Goods>
        </div>
        <BackTop :top="500" />
        <router-view />
    </div>
</template>

<script>
import { fetchLunbo, fetchRecommend } from "../api/index.js";
import Goods from "../components/Goods.vue";
import BackTop from "../components/BackTop.vue";

import Nike from '../assets/images2/nike.png'
import Adidas from '../assets/images2/阿迪达斯1.png'
import Puma from '../assets/images2/彪马.png'
import Vans from '../assets/images2/万斯1.png'
import CannaGoose from '../assets/images2/加拿大11.png'
import Supreme from '../assets/images2/surpme.png'
import Aka from '../assets/images2/Aka.png'
import Exit from '../assets/images2/exit.png'

export default {
    data() {
        return {
            goods: [],
            lunbo: [],
            grid: [
                { text: "Nike", img: Nike, to: "/goodslist" },
                { text: "Adidas", img: Adidas, to: "/newslist" },
                { text: "Puma", img: Puma, to: "/goodslist" },
                { text: "Vans", img: Vans, to: "/goodslist" },
                { text: "Canna Goose", img: CannaGoose, to: "/goodslist" },
                { text: "Supreme", img: Supreme, to: "/goodslist" },
                { text: "Aka", img: Aka, to: "/goodslist" },
                { text: "Exit", img: Exit, to: "/goodslist" }
            ],
        };
    },
    created() {
        this._fetchLunbo();
        this._fetchRecommend()
    },
    methods: {
        async _fetchLunbo() {
            let { message } = await fetchLunbo();
            this.lunbo = message;
        },
        async _fetchRecommend() {
            let { message } = await fetchRecommend();
            this.goods = message;
        },
        handleGoods(data, event) {
            this.$router.push("/goodDetails/" + data.id);
            console.log('1')
        }
    },
    components: {
        Goods, BackTop
    }
}
</script>

<style lang="scss" scoped>
// .body{
//     font-family: PingFangSC-Regular;
// }
.search {
    display: flex;
    justify-content: space-around;
    background-color: #fff;

    .van-search {
        flex: 1
    }
}

.my-swipe .van-swipe-item {
    height: 200px;

    img {
        width: 100%;
        height: 100%;
    }
}

.van-grid {
    .item {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-size: 14px;
        color: #666;

        .text {
            margin-top: 6px;
        }

        img {
            width: 50%;
        }
    }
}

.van-divider {
    font-size: 16px;
    color: #221f1ffc
}

.goodslist {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    padding-top: 10px;
    margin-bottom: 50px;
    background-color: #f0eded
}
</style>